﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Demo::JskitValidation::</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../main.css">
    <script src="../../release/jskit.core.js">
    </script>
    <script src="../JskitConfig_doc.js">
    </script>
    <script>
        var jvd = new JskitValidation("jvd");
        jvd.setDisplay("errorMessage");
        jvd.setErrorStyleString("color:#ff0000;border:1px solid #cccccc;background-color:#ffffd0");
        jvd.setDisplay("alert");
        jvd.load(new Array(
                new Array("query", "#txt_1", "", "checkUsername()", "", ""),
                new Array("required", "#txt_2", "Please fill out the password field!", "", "", ""),
                new Array("compare", "#txt_password", "The two passwords do not match", "", "#txt_2", "=="),
                new Array("required", "#txt_3", "Please fill out the email field!", "", "", ""),
                new Array("email", "#txt_3", "invalid email", "", "", ""),
                new Array("regex", "#txt_tel", "invalid tel number", "^[1-9]\\d{7}$", "", ""),
                new Array("check", "@cb_group", "Please select your favorite", "", "", ""),
                new Array("money", "#txt_salary", "invalid money", "", "", "")
                ));
        jskitEvents.ready("onload", "jvd.deploy();");
        function checkUsername(rObj) {
            if (rObj.value == "admin")
                return "You can't use this username！";
            else
                if (rObj.value.trim() == "")
                    return "Please fill out username";
                else
                    return "";
        }
        function doCheck() {
            var bk = jvd.checkAll();
            if (bk) {
                alert("All Pass!");
            }
        }
    </script>
</head>
<body>
<table border="0" id="Table1">
    <tr>
        <td class="package">
            JskitValidation.js DEMO
        </td>
    </tr>
    <tr>
        <td class="content">
            <a href="../tutorial/JskitValidation.html">JskitValidation.js 参考</a>
        </td>
    </tr>
</table>
<div>
<div>
    <table>
        <tr>
            <td>
                Choice the position of message display:
            </td>
            <td>
                <select onchange="jvd.cleanMessageAll();jvd.setDisplay(this.value);">
                    <option value="alert">alert</option>
                    <option value="down">down</option>
                    <option value="up">up</option>
                    <option value="after">after</option>
                    <option value="before">before</option>
                </select>
            </td>
        </tr>
    </table>
    <table cellpadding="3" style="border:1px solid #000000;background-color:#eeeeee;">
        <tr>
            <td colspan="2" style="background-color:#aaaaaa;color:#ffffff">
                Form：
            </td>
        <tr>
            <td>
                username:
            </td>
            <td>
                <input type="text" id="txt_1"/>*(can't use 'admin')
            </td>
        </tr>
        <tr>
            <td>
                password:
            </td>
            <td>
                <input type="text" id="txt_2" value=""/>*
            </td>
        </tr>
        <tr>
            <td>
                Confirm:
            </td>
            <td>
                <input type="text" id="txt_password"/>*
            </td>
        </tr>
        <tr>
            <td>
                Email:
            </td>
            <td>
                <input type="text" id="txt_3"/>*
            </td>
        </tr>
        <tr>
            <td>
                Tel:
            </td>
            <td>
                <input type="text" id="txt_tel"/>(8 length number)
            </td>
        </tr>
        <tr>
            <td>
                Favorite:
            </td>
            <td>
                <input type="checkbox" name="cb_group" value="fav1"/>fav1
                <input type="checkbox" name="cb_group" value="fav2"/>fav2
                <input type="checkbox" name="cb_group" value="fav3"/>fav3
            </td>
        </tr>
        <tr>
            <td>
                Salary:
            </td>
            <td>
                <input type="text" id="txt_salary"/>*
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" value="submit" onclick="doCheck()"/>
            </td>
        </tr>
    </table>
</div>
<div>
    第一步、引入必须的javascript文件
    <textarea name="JskitSyntax_code" class="html">
        &lt;head>
        ...
        &lt;--// import javascript files -->
        &lt;script src="$JSKIT_PATH$/base/JskitBase.js">&lt;/script>
        &lt;script src="$JSKIT_PATH$/base/JskitUtil.js">&lt;/script>
        &lt;script src="$JSKIT_PATH$/base/JskitEvents.js">&lt;/script>
        &lt;script src="$JSKIT_PATH$/ui/JskitValidation.js"> &lt;/script>
        ...
        &lt;/head>
    </textarea>
</div>
<div>第二步、设置validation的参数和任务。</div>
<div>1） setDisplay方法，设置信息显示的方式，可选的参数有：</div>
<table border="1" cellspacing="0" cellpadding="3">
    <tr>
        <td>
            <b>alert:</b>
        </td>
        <td>
            alert方式（缺省）
        </td>
    </tr>
    <tr>
        <td>
            <b>before:</b>
        </td>
        <td>
            在验证对象之前显示错误信息
        </td>
    </tr>
    <tr>
        <td>
            <b>after:</b>
        </td>
        <td>
            在验证对象之后显示错误信息
        </td>
    </tr>
    <tr>
        <td>
            <b>up:</b>
        </td>
        <td>
            在验证对象的上方显示错误信息
        </td>
    </tr>
    <tr>
        <td>
            <b>down:</b>
        </td>
        <td>
            在验证对象的下方显示错误信息
        </td>
    </tr>
</table>
<div>如果未设置或参数不是这些指定的值，将按alert方式处理。</div>
<div>2）tasks属性，是个Array值，用来部署需要验证的表单项，验证规则等信息，具体的书写方式，请查看<a
        href="../tutorial/JskitValidation.html">JskitValidation.js参考</a></div>
<div>3）deploy()方法，必须在需要验证的表单项装载之后执行，适宜body的onload事件触发。</div>
<div>
    <textarea name="JskitSyntax_code" class="js">
        //扩展的验证方法，该方法查验用户名是否合法。
        function checkUsername(rObj){
        //在扩展的方法中您可以加入同步Ajax方式验证用户名是否存在等交互性验证
        if(rObj.value=="admin")
        return "非法用户名,您不能注册该帐号！";
        else if(rObj.value.trim()=="")
        return "请输入用户名";
        else
        return "";
        }
        var jvd = new JskitValidation("jvd");
        jvd.setDisplay("errorMessage");
        jvd.setErrorStyleString("color:#ff0000;border:1px solid #cccccc;background-color:#ffffd0");
        jvd.setDisplay("alert");
        jvd.load(new Array(
        new Array("query", "#txt_1", "", "checkUsername()", "", ""),
        new Array("required", "#txt_2", "Please fill out the password field!", "", "", ""),
        new Array("compare", "#txt_password", "The two passwords do not match", "", "#txt_2", "=="),
        new Array("email", "#txt_3", "invalid email", "", "", ""),
        new Array("required", "#txt_3", "invalid email", "", "", ""),
        new Array("regex", "#txt_tel", "invalid tel number", "^[1-9]\\d{7}$", "", ""),
        new Array("check", "@cb_group", "Please select your favorite", "", "", ""),
        new Array("money", "#txt_salary", "invalid money", "", "", "")
        ));
        //页面装载完成后，执行deploy()方法
        jskitEvents.ready("onload", "jvd.deploy();");

        function doCheck(){
        var bk = jvd.checkAll();
        if(bk){
        alert("All Pass!");
        }
        }
    </textarea>

</div>
<div>第三步、表单的HTML代码</div>
<div>
    <textarea name="JskitSyntax_code" class="html">
        Username: &lt;input type="text" id="txt_1" /&gt;*
        &lt;br&gt;
        Password: &lt;input type="text" id="txt_2" /&gt;*
        &lt;br&gt;
        Confirm Password: &lt;input type="text" id="txt_password" /&gt;*
        &lt;br&gt;
        Email: &lt;input type="text" id="txt_3" /&gt;*
        &lt;br&gt;
        Tel: &lt;input type="text" id="txt_tel" /&gt;
        &lt;br&gt;
        Favorite:
        &lt;input type="checkbox" name="cb_group" value="fav1" /&gt;fav1
        &lt;input type="checkbox" name="cb_group" value="fav2" /&gt;fav2
        &lt;input type="checkbox" name="cb_group" value="fav3" /&gt;fav3
        Salary:&lt;input type="text" id="txt_salary"/&gt;
        &lt;input type="button" value="submit" onclick="doCheck()"/&gt;
    </textarea>
</div>
</div>
</body>
</html>